<template>
  <div class="decorateSet">

    <div class="head">
      <i class="iconfont icon-zhuangxiu2"></i>
      <span>装修设置</span>
    </div>

    <el-tabs v-model="activeName" @tab-click="tabClickHandle">
      <el-tab-pane label="固定主题色页面" name="color">
        <ColorComponent ref="colorComponent"></ColorComponent>
      </el-tab-pane>
      <el-tab-pane label="自定义页面" name="customize">
        <CustomizeComponent ref="customizeComponent"></CustomizeComponent>
      </el-tab-pane>
      <el-tab-pane label="个性化页面" name="individualization">
        <IndividualizationComponent ref="individualizationComponent"></IndividualizationComponent>
      </el-tab-pane>
      <!-- <el-tab-pane label="项目页面" name="project">
        <ProjectComponent ref="projectComponent"></ProjectComponent>
      </el-tab-pane> -->
      <el-tab-pane label="底部模板页面" name="bottomFormwork">
        <BottomFormworkComponent ref="bottomFormworkComponent"></BottomFormworkComponent>
      </el-tab-pane>
      <el-tab-pane label="主题模板" name="loginAfterLink">
        <LoginAfterLinkComponent ref="loginAfterLinkComponent"></LoginAfterLinkComponent>
      </el-tab-pane>
      <!-- <el-tab-pane label="自定义表单" name="customizeForm">
        <CustomizeFormComponent ref="customizeForm"></CustomizeFormComponent>
      </el-tab-pane> -->
      <el-tab-pane label="其他功能" name="other">
        <OtherComponent ref="otherComponent"></OtherComponent>
      </el-tab-pane>
      <!-- <el-tab-pane label="组件管理" name="customModule">
        <CustomModuleComponent ref="customModuleComponent"></CustomModuleComponent>
      </el-tab-pane>
      <el-tab-pane label="组件类型管理" name="componentStyle">
        <ComponentStyle ref="componentStyle"></ComponentStyle>
      </el-tab-pane> -->
    </el-tabs>

    <AddCustomModule ref="addCustomModule" v-if="showCustomModule"></AddCustomModule>
    <AddComponentStyle ref="addComponentStyle" v-if="showAddComponentStyle"></AddComponentStyle>
    <VlonChooseLink ref="vlonChooseLink"></VlonChooseLink>
  </div>
</template>
<script>
  import Bus from "@/utils/bus.js"
  export default {
    name: "decorateSet",
    data() {
      return {
        activeName: "color",
        showCustomModule: false,
        showAddComponentStyle: false,
      };
    },
    created() {}, 
    props: [],
    components: {
      VlonChooseLink: () => import("@/pages/components/vlonChooseLink/Index.vue"),
      ColorComponent: () => import("./color/Index.vue"),
      CustomizeComponent: () => import("./customize/Index.vue"),
      IndividualizationComponent: () =>
        import("./individualization/Index.vue"),
      ProjectComponent: () => import("./project/Index.vue"),
      BottomFormworkComponent: () => import("./bottomFormwork/Index.vue"),
      OtherComponent: () => import("./other/Index.vue"),
      CustomModuleComponent: () => import("./customModule/Index.vue"),
      AddCustomModule: () => import("./customModule/add.vue"),
      ComponentStyle: () => import("./componentStyle/Index.vue"),
      AddComponentStyle: () => import("./componentStyle/add.vue"),
      LoginAfterLinkComponent: () => import("./loginAfterLink/Index.vue"),
      CustomizeFormComponent: () => import("./customizeForm/Index.vue"),
    },
    mounted() {
      this.$nextTick(() => {
        localStorage.removeItem("decoratePageId");
        localStorage.removeItem("decoratePageNowType");
        localStorage.removeItem("individualizationPageKey");
        localStorage.removeItem("pageBootomButtonNowType");
        localStorage.removeItem("decorateLoginModuleNowType");
        localStorage.removeItem("pageBootomButtonId");
        let decorateSetActiveName = localStorage.getItem(
          "decorateSetActiveName"
        );
        if (decorateSetActiveName) {
          this.activeName = decorateSetActiveName;
        } else {
          this.activeName = "color";
        }
      });
      Bus.$off("editCustomModule");
      Bus.$on("editCustomModule", params => {
        this.showCustomModule = params.show;
        this.$nextTick(() => {
          if (params.nowType) {
            if (params.nowType == "add") {
              if (this.$refs.addCustomModule) {
                this.$refs.addCustomModule.nowType = params.nowType;
                this.$refs.addCustomModule.setDefault();
              }
            } else if (params.nowType == "edit") {
              if (this.$refs.addCustomModule) {
                this.$refs.addCustomModule.nowType = params.nowType;
                if (params.data) {
                  this.$refs.addCustomModule.item = JSON.parse(params.data);
                }
              }
            }
          } else {
            //console.log("关闭弹窗");
          }
        })
      })
      Bus.$off("editComponentStyle");
      Bus.$on("editComponentStyle", params => {
          this.showAddComponentStyle = params.show;
        this.$nextTick(() => {
          if (params.nowType) {
            if (params.nowType == "add") {
              if (this.$refs.addComponentStyle) {
                this.$refs.addComponentStyle.nowType = params.nowType;
                this.$refs.addComponentStyle.setDefault();
              }
            } else if (params.nowType == "edit") {
              if (this.$refs.addComponentStyle) {
                this.$refs.addComponentStyle.nowType = params.nowType;
                if (params.data) {
                  this.$refs.addComponentStyle.item = JSON.parse(params.data);
                }
              }
            }
          } else {
            //console.log("关闭弹窗");
          }
        })
      });
    
    },
    methods: {
      tabClickHandle() {
        switch (this.activeName) {
          case "color":
            this.$refs.colorComponent.init();
            break;
          case "customize":
            this.$refs.customizeComponent.init();
            break;
          case "individualization":
            this.$refs.individualizationComponent.init();
            break;
          case "project":
            this.$refs.projectComponent.init();
            break;
          case "bottomFormwork":
            this.$refs.bottomFormworkComponent.init();
            break;
          case "loginAfterLink":
            this.$refs.loginAfterLinkComponent.init();
            break;
          case "customizeForm":
            this.$refs.customizeForm.init();
            break;
          case "other":
            this.$refs.otherComponent.init();
            break;
          case "customModule":
            this.$refs.customModuleComponent.init();
            break;
          case "componentStyle":
            this.$refs.componentStyle.init();
            break;
        }
        localStorage.setItem("decorateSetActiveName", this.activeName);
      },
    },
    computed: {},
    watch: {},
  };
</script>
<style scoped lang="scss">
  .decorateSet {
    margin: 0px 20px 20px 20px;
    top: 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border: 1px solid #e6ebf5;
    background-color: #ffffff;
    transition: 0.3s;
    color: #303133;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
    height: calc(100% - 40px);

    &>.head {
      display: flex;
      align-items: center;
      height: 30px;
      margin-bottom: 20px;

      i {
        color: #1890ff;
        margin-right: 5px;
        font-size: 15px;
      }

      span {
        font-size: 16px;
      }
    }

    .el-tabs {
      height: calc(100% - 50px);
    }
  }
</style>
<style lang="scss">
  .decorateSet {
    .el-tabs {
      .el-tabs__content {
        height: calc(100% - 55px);

        &>div {
          height: 100%;
        }
      }
    }
  }
</style>
